<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>cloud-home</title>
		<meta name="description" content="" />
		<meta name="author" content="hello" />
		<!-- stylesheet import-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/table.css" />
		<style type="text/css">
		  	body{
		  		padding-top: 80px;
		  		padding-bottom:60px;
		  	}
  		</style>
	</head>
	<body>
		<div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
	          <a class="brand">Cloud Service Center</a>
	          <div class="nav-collapse">
	            <ul class="nav">
	              <li class="active"><a href="#">Home</a></li>
	              <li><a href="about.html">About</a></li>
	              <li><a href="contact.html">Contact</a></li>
	            </ul>
	            <ul class="nav" style="float: right">
	              <li class="active"><a id="user"></a></li>
	              <li><a href="index.html">logout</a></li>
	            </ul>
	          </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>
	
	    <div class="container">
	    	<ul class="nav nav-tabs">
	    				  <li class="active"><a href="#query_bill" data-toggle="tab">Query Bill Form</a></li>
						  <li><a href="#inquiry_form" data-toggle="tab">Fill Inquiry Form</a></li>
						  <li><a href="#cargo_form" data-toggle="tab">Fill Cargo Form</a></li>
						</ul>
	              		<div class="tab-content">
	              			<div id="query_bill" class="tab-pane active">
		              			<div>
		              				<input id="query_bill" type="button" class="btn btn-primary" value="Query Bill">
		              			</div>
	              				<div class="span5" style="margin-top:10px">
	              					<table id="bill_table" class="tablesorter"> 
									<thead> 
										<tr> 
											<th>No</th>
											<th>Company</th>
											<th>Consignee Name</th>
											<th>Consignee Address</th>
											<th>Shipping Agent Email</th> 
										</tr> 
									  </thead> 
										<tbody> 
												
										</tbody>
									<!-- 	<tbody tabindex="0"></tbody> -->
									</table>
	              				</div>
								<div class="span4 div-form">
									<table width="476" height="438" border="1">
									  <tr>
									    <td colspan="5">
									    	<label>COMPANY</label>
									    	<span id="bill_company"></span>
									    </td>
									  </tr>
									  <tr>
									    <td rowspan="2"><label>CONSIGNEE</label></td>
									    <td colspan="2">
									    	<label>NAME</label>
									    	<span id="bill_name"></span>
									    </td>
									    <td colspan="2">
									    	<label>BANK</label>
									    	<span id="bill_bank"></span>
									    </td>
									  </tr>
									  <tr>
									    <td colspan="2">
									    	<label>ADDRESS</label>
									    	<span id="bill_addr"></span>
									    </td>
									    <td colspan="2">
									    	<label>ACCOUNT</label>
									    	<span id="bill_account"></span>
									    </td>
									  </tr>
									  <tr>
									    <td>
									    	<label>VESSEL</label>
									    	<span id="bill_vess"></span>
									    </td>
									    <td>
									    	<label>VOYAGE</label>
									    	<span id="bill_voy"></span>
									    </td>
									    <td colspan="2">
									    	<label>PORT OF LOADING</label>
									    	<span id="bill_pol"></span>
									    </td>
									    <td>
									    	<label>PORT OF DESTINATION</label>
									    	<span id="bill_dest"></span>
									    </td>
									  </tr>
									  <tr>
									    <td>
									   	 	<label>NO</label>
									   	 	<span id="bill_no"></span>
									   	 </td>
									    <td>
									    	<label>DELIVER PRIVISION</label>
									    	<span id="bill_dp"></span>
									    </td>
									    <td colspan="3">
									    	<label>OCEAN FRIEIGHT</label>
									    	<span id="bill_ocean"></span>
									    </td>
									  </tr>
									  <tr>
									    <td colspan="2">
									    	<label>PLACE OF UNLOADING</label>
									    	<span id="bill_pou"></span>
									    </td>
									    <td>
									    	<label>ARRIVAL DATE</label>
									    	<span id="bill_ad"></span>
									    </td>
									    <td>
									    	<label>INTO YARD DATE</label>
									    	<span id="bill_iyd"></span>
									    </td>
									    <td>&nbsp;</td>
									  </tr>
									  <tr>
									    <td>
									    	<label>MARK &amp; NO</label>
									    	<span id="mark"></span>
									    </td>
									    <td>
									    	<label>CARGO NAME</label>
									    	<span id="cargo"></span>
									    </td>
									    <td>
									    	<label>QUANTITY</label>
									    	<span id="quantity"></span>
									    </td>
									    <td>
									    	<label>WEIGHT</label>
									    	<span id="weight"></span>
									    </td>
									    <td>
									    	<label>VOLUME/M3</label>
									    	<span id="m3"></span>
									    </td>
									  </tr>
									  <tr>
									    <td colspan="5"><label>YOU SHOULD REPORT TO CUSTOMS</label></td>
									  </tr>
									  <tr>
									    <td colspan="2">
									    	<label>SHIPPING AGENT EMAIL</label>
									    	<span id="sgemail"></span>
									    </td>
									    <td colspan="3">
									    	<label>SHIPPER EMAIL</label>
									    	<span id="semail"></span>
									    </td>
									  </tr>
									</table>
								</div> 
	              			</div>
	              			<div id="inquiry_form" class="tab-pane">
	              				<form>
             							<table class="table">
             								<tr>
             									<td style="width:100px;text-align:right"><label>NO</label></td>
             									<td><input id="inquiry_no"  type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SHIPPER</label></td>
             									<td><input id="inquiry_shipper"  type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SHIPPER EMAIL</label></td>
             									<td><input id="inquiry_shipper_email" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>DEPARTURE</label></td>
             									<td><input id="inquiry_departure" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>DESTINATION</label></td>
             									<td><input id="inquiry_dest" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>CARGO NAME</label></td>
             									<td><input id="inquiry_cargo" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>WEIGHT</label></td>
             									<td><input id="inquiry_weight" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>VOLUME/M3</label></td>
             									<td><input id="inquiry_m3" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>EXTRA INFOMATION</label></td>
             									<td><input id="inquiry_info" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><input class="btn" type="button" id="select_sagent" value="Select Shipping Agent"></td>
             									<td><textarea id="inquiry_sagents" rows="6" cols="20"></textarea></td>
             								</tr>
             								<tr>
             									<td></td>
             									<td><input id="inquiry_send" type="button" class="btn btn-primary" value="send"></td>
             								</tr>
             							</table>
             						</form>
             						<div class="modal hide fade" id="sagents_info">
									  <div class="modal-header">
									    <a class="close" data-dismiss="modal">×</a>
									    <h3>SELECT SHIPPING AGENTS</h3>
									  </div>
									  <div class="modal-body">
									  	<table class="table" id="agents_list">
									  		<thead>
									  			<tr>
									  				<th>Name</th>
									  				<th>Email</th>
									  				<th>Description</th>
									  			</tr>
									  		</thead>
									  		<tbody>
									  		</tbody>
									  	</table>
									  </div>
									  <div class="modal-footer">
									    <a id="sagents_info_cancel" class="btn">Cancel</a>
									    <a id="sagents_info_confirm" class="btn btn-primary">Ok</a>
									  </div>
									</div>
	              			</div>
	              			<div id="cargo_form" class="tab-pane">
	              				<form>
             							<table class="table">
             								<tr>
             									<td style="width:100px;text-align:right"><label>NO</label></td>
             									<td><input id="cargo_no"  type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SHIPPER</label></td>
             									<td><input id="cargo_shipper"  type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SHIPPER ADDRESS</label></td>
             									<td><input id="cargo_shipper_address" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>CONSIGNEE</label></td>
             									<td><input id="cargo_con" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>CONSIGNEE ADDRESS</label></td>
             									<td><input id="cargo_con_addr" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>DEPARTURE</label></td>
             									<td><input id="cargo_departure" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>DESTINATION</label></td>
             									<td><input id="cargo_dest" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SPECIAL INSTRUCTIONS</label></td>
             									<td><input id="cargo_spec" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>CARGO NAME</label></td>
             									<td><input id="cargo_name" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>PIECES</label></td>
             									<td><input id="cargo_pieces" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>WEIGHT</label></td>
             									<td><input id="cargo_weight" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>VOLUME/M3</label></td>
             									<td><input id="cargo_m3" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>CHARGES</label></td>
             									<td><input id="cargo_charges" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SHIPPER EMAIL</label></td>
             									<td><input id="cargo_shipper_email" type="text"></td>
             								</tr>
             								<tr>
             									<td style="width:100px;text-align:right"><label>SHIPPING AGENT EMAIL</label></td>
             									<td><input id="cargo_sagent_email" type="text"></td>
             								</tr>
             								<tr>
             									<td></td>
             									<td><input id="cargo_send" type="button" class="btn btn-primary" value="send"></td>
             								</tr>
             							</table>
             						</form>
	              			</div>
	              		</div>
	    </div> <!-- /container -->
	    
	    <!-- JavaScript at the bottom for fast page loading -->

		  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		  <script src="js/libs/jquery-1.7.1.min.js"></script>
		<!-- import bootstrap-->
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="js/home.js"></script>
		<script src="js/libs/jquery.dataTables.min.js"></script>
		<script src="test/test.js"></script>
	</body>
</html>
